<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/lx/admin/components/meta.html" />
    <title>用户管理 ${metaTitleSuffix!}</title>
    <#include "/lx/admin/components/stylesheets.html" />
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="2-1" />
            <#include "/lx/admin/components/menu.html" />
            <el-container>
                <#include "/lx/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-row>
                            <el-col :span="12">
                                <div class="title theme-color1">用户管理</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="operations">
                                    <!-- <el-button type="success" size="small" @click="add"><i class="el-icon-plus"></i>添加</el-button> -->
                                    <!-- <el-button type="success" size="small" @click="exportExcel"><i class="el-icon-download"></i>导出当前页</el-button> -->
                                    <el-button type="success" size="small" @click="exportExcel2"><i class="el-icon-download"></i>导出</el-button>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="search">
                            <el-input v-model="search.keyword" placeholder="姓名/手机" clearable style="width: 217px;"></el-input>
                            <el-cascader :options="city" change-on-select filterable clearable v-model="search.location"></el-cascader>
                            <el-select v-model="search.companyId" placeholder="公司" filterable clearable>
                                <el-option v-for="(item, index) in companyArray" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                            <el-select  v-model="search.status" clearable filterable placeholder="状态">
                                 <el-option :value="0" label="未注册"></el-option>
                                 <el-option :value="1" label="待审核"></el-option>
                                 <el-option :value="2" label="已审核"></el-option>
                                 <el-option :value="3" label="不通过"></el-option>
                            
                            </el-select>
                            <el-button @click="onSearch"><i class="el-icon-search"></i>筛选</el-button>
                        </div>
                        <el-table id="dataTable" ref="multipleTable" :data="list" tooltip-effect="dark" :stripe='true' style="width: 100%">
                            <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip>
                            </el-table-column>
                            <!-- <el-table-column prop="englishName" label="英文名" width="100" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column label="工作名片" width="120" align="center">
                                <template slot-scope="scope">
                                    <a :href="scope.row.card" target="_blank">
                                        <div class="card-preview cutimg">
                                            <image :src="scope.row.card"></image>
                                        </div>
                                    </a>
                                </template>
                            </el-table-column> -->
                            <!-- <el-table-column prop="sex" label="性别" width="60">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.sex == 0">男</span>
                                    <span v-else-if="scope.row.sex == 1">女</span>
                                </template>
                            </el-table-column> -->
                            <!-- el-table-column prop="location" label="所在地">
                            </el-table-column> -->
                            <el-table-column prop="province" label="省份" width="80" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="city" label="城市" width="80" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="companyName" label="公司">
                            </el-table-column>
                            <!-- <el-table-column prop="country" label="擅长国家" width="80">
                            </el-table-column>
                            <el-table-column prop="department" label="职能类别" width="80">
                            </el-table-column>
                            <el-table-column prop="startDate" label="服务起始年月" width="110">
                            </el-table-column> -->
                            <el-table-column prop="point" label="积分" width="80" sortable>
                            </el-table-column>
                            <!-- <el-table-column prop="postgradSchool" label="硕士及以上毕业院校" sortable>
                            </el-table-column>
                            <el-table-column prop="postgradMajor" label="硕士及以上专业类别" sortable>
                            </el-table-column>
                            <el-table-column prop="undergradSchool" label="本科毕业院校" sortable>
                            </el-table-column>
                            <el-table-column prop="undergradMajor" label="本科专业类别" sortable>
                            </el-table-column> -->
                            <el-table-column prop="account" label="账号" width="120">
                            </el-table-column>
                            <!-- <el-table-column prop="password" label="密码">
                            </el-table-column> -->
                            <el-table-column prop="email" label="邮箱" width="200">
                            </el-table-column>
                            <el-table-column prop="addTime" label="注册时间" width="180">
                            </el-table-column>
                            <el-table-column prop="status" label="审核状态" width="80">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.status == 0">未注册</span>
                                    <span v-if="scope.row.status == 1">待审核</span>
                                    <span v-if="scope.row.status == 2">已审核</span>
                                    <span v-if="scope.row.status == 3">不通过</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100" :class-name="optionHidden ? 'hidden' : ''">
                                <template slot-scope="scope">
                                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                                    <!-- <el-button @click="verify(scope.row)" type="text" size="small">审核</el-button> -->
                                    <el-button @click="del(scope.row)" type="text" size="small" style="color: red;">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <#include "/lx/admin/components/page.html" />
                        <el-dialog title="审核" :visible.sync="dialogVisible" width="400px">
                            <div>
                                <el-radio v-model="verifyUser.status" :label="1" border>待审核</el-radio>
                                <el-radio v-model="verifyUser.status" :label="2" border>已审核</el-radio>
                                <el-radio v-model="verifyUser.status" :label="3" border>不通过</el-radio>
                            </div>
                            <div v-if="verifyUser.status == 3" style="margin-top: 10px;">
                                <el-input v-model="verifyUser.content" placeholder="请输入不通过的原因"></el-input>
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="submitVerify">确 定</el-button>
                            </span>
                        </el-dialog>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/lx/admin/components/footer.html" />
    </div>
    <#include "/lx/admin/components/scripts.html" />
    <script src="https://cdn.bootcss.com/xlsx/0.14.0/xlsx.full.min.js"></script>
    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <script src="/lx/activity/assets/json/city.json"></script>
    <script>
        var vue = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                optionHidden: false,
                city: city,
                companyArray: [],
                search: {
                    keyword: '',
                    location: '',
                    companyId: '',
                    status:''
                },
                dialogVisible: false,
                verifyUser: {
                    id: null,
                    status: null,
                    content: ''
                }
            }
        },
        mounted: function() {
            this.list = ${items!'[]'}
            this.companyArray = ${companies!'[]'}

            this.search.keyword = '${keyword!}';

            var searchProvince = '${province!}';
            var searchCity = '${city!}';
            if (searchProvince != '') {
                this.search.location = new Array;
                this.search.location.push(searchProvince);

                if (searchCity != '') {
                    this.search.location.push(searchCity);
                }
            }
            var searchCompanyId = '${companyId!}';
            if (searchCompanyId != '') {
                this.search.companyId = Number(searchCompanyId);
            }
        },
        methods: {
            add() {
                window.location.href = "/lx/admin/user/info";
            },
            edit(item) {
                window.location.href = "/lx/admin/user/info?userId=" + item.id;
            },
            verify(item) {
                this.verifyUser.id = item.id;
                this.verifyUser.status = item.status;
                this.verifyUser.content = item.content;
                this.dialogVisible = true;
            },
            del(item) {
                var self = this;
                confirm("确认删除？请谨慎操作", "确认", function() {
                    var url = "/lx/admin/user/delete"
                    var param = {
                        userId: item.id
                    };
                    var success = response => {
                        window.location.href = "/lx/admin/user/list";
                    }
                    var fail = response => {
                        msg(response.msg);
                    }
                    var complete = () => {}
                    axiosRequestPro(url, param, success, fail, complete);
                })
            },
            onSearch() {
                var self = this;
                var keys = [
                    { key: 'keyword', value: self.search.keyword },
                    { key: 'companyId', value: self.search.companyId },
                    { key: 'status', value: self.search.status },
                ]
                if (self.search.location && self.search.location.length == 1) {
                    keys.push({ key: 'province', value: self.search.location[0] });
                    keys.push({ key: 'city', value: '' });
                } else if (self.search.location.length > 1) {
                    keys.push({ key: 'province', value: self.search.location[0] });
                    keys.push({ key: 'city', value: self.search.location[1] });
                } else {
                    keys.push({ key: 'province', value: '' });
                    keys.push({ key: 'city', value: '' });
                }
                goPage(1, keys);
            },
            exportExcel() {
                var self = this;
                self.optionHidden = true;
                setTimeout(function() {
                    /* generate workbook object from table */
                    var elt = document.getElementById('dataTable');
                    var wb = XLSX.utils.table_to_book(elt, { display: true })

                    // this.fixedColumn = 'right'
                    /* get binary string as output */
                    var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'array' })

                    try {
                        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '用户列表.xlsx')
                        self.optionHidden = false;
                    } catch (e) {
                        if (typeof console !== 'undefined') console.log(e, wbout)
                    }
                }, 1000)
                return

                return wbout
            },
            exportExcel2() {
                goDownload();
            },
            onPageChange(val) {
                // console.log('当前页: {val}' + val);
                goPage(val)
            },
            submitVerify() {
                var self = this;
                if (self.verifyUser.status != 3) {
                    self.verifyUser.content = '';
                }
                var url = "/lx/admin/user/verify"
                var param = {
                    userId: self.verifyUser.id,
                    status: self.verifyUser.status,
                    content: self.verifyUser.content
                };
                var success = response => {
                    window.location.reload();
                }
                var fail = response => {
                    msg(response.msg);
                }
                var complete = () => {}
                axiosRequestPro(url, param, success, fail, complete);
            }
        }
    })
    </script>
    <script>
    $('.cutimg').each(function() {
        var self = $(this);
        var img = new Image();
        img.src = self.find('img').attr('src');
        img.addEventListener('load', function() {
            var imgWidth = img.width;
            var imgHeight = img.height;

            if ((imgWidth / imgHeight) >= (self.width() / self.height())) {
                self.find('img').css({ "width": "100%", "height": "auto" });
            } else {
                self.find('img').css({ "width": "auto", "height": "100%" });
            }
        }, false);
    })
    </script>
    <#include "/lx/admin/components/msg.html" />
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    .operations {
        text-align: right;
    }

    .hidden {
        display: none;
    }

    .card-preview {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .card-preview>img {
        width: 100%;
    }
    </style>
</body>

</html>